<template>
  <!-- 脸谱列表页面 -->
  <view id="container">
    <!-- <image src="https://z3.ax1x.com/2021/09/02/hD6GsU.png" class="banner"></image> -->

    <view class="item" v-if="familyList.length == 0">
      <view style="display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; height: 100%">
        <image src="../../static/index/lp_2.png" mode="" style="width: 100rpx; height: 100rpx"></image>
        <view class="" style="margin-left: 30rpx; font-weight: 430"> 还没有添加家人，点击下方添加 </view>
      </view>
    </view>
		<scrollView height1="86vh" :isReloadComplete1="isReloadComplete" :isShowBottomView1="isShowBottomView" :isShowNodata1="isReloadComplete && !isNoData" @downdata="downdata" @updata="updata" @onScroll="onScroll" v-else>
			<view v-for="item in familyList">
				<view class="item">
					<image :src="item.face_img" class="img" v-if="item.face_img.indexOf('https') !== -1"></image>
					<image :src="vuex_api_HEADER + item.face_img" class="img" v-else></image>
					<view class="info">
						<view class="info-top">
							<text class="name">{{ item.name }}</text>
							<text class="nickname">{{ item.label }}</text>
						</view>
						<view class="info-bottom">
							<text class="gender">{{ item.sex == 1 ? '男' : '女' }}</text>
							<text class="age">{{ item.age }}</text>
							<text class="height">{{ item.height }}</text>
						</view>
					</view>
					<view class="btn">
						<view class="editor" @click="editDetailPage(item.id)">编辑</view>
						<view class="del" @click="userDeleteSomeone(item.id)">删除</view>
					</view>
				</view>
			</view>
		</scrollView>
    <!-- 添加家人 -->
    <navigator url="/pages/facebook/add-personnel?type=new">
      <view class="add-family" >添加家人</view>
    </navigator>
  </view>
	
</template>

<script>
	import scrollView from '../../components/scroll-view/scroll-view.vue';
	import selfRoll from '../../components/self-roll/roll.vue';
	
export default {
	components: {
		scrollView,
		selfRoll
	},
  data() {
    return {
      // 家人列表
      familyList: [],
			page: 1,
			size: 7,
			isReloadComplete: false,
			isNoData: true,
			roll: false, //返回顶部
			right: '80vw', //右侧距离
			systemHeight: 0, //系统高度
			isShowBottomView: false,
			page_count: 0
    }
  },
	onLoad() {
		this.getFamilyFacebook();
		this.systemHeight = this.getSystemMsg('windowHeight');
	},
	onShow() {
		this.page = 1;
		this.getFamilyFacebook();
	},
  methods: {
    // 获取家人脸谱列表
    getFamilyFacebook() {
			this.iserror = true;
      this.$u.api.get_user_facebook_list({
				page: this.page,
				psize: this.size
			}).then((res) => {
				if(res.code == 200) {
					if(this.page === 1) {
						// 首次加载
						this.familyList = res.data.data;
						this.page_count = res.data.page_count;
					} else {
						this.familyList.push(...res.data.data)
					}
					this.iserror = false;
				} else {
					this.iserror = false;
				}
			})
    },
    // 用户点击编辑按钮，进入编辑页面
    editDetailPage(id) {
      let type = 'edit';
      uni.navigateTo({
        url: `/pages/facebook/add-personnel?id=${id}&type=${type}`
      })
    },

    // 用户删除脸谱
    userDeleteSomeone(id) {
      let self = this
      this.$u.api.user_delete_one_facebook({
				id
			}).then((res) => {
				if (res.code == 200) {
					uni.showToast({
						title: '删除成功',
						icon: 'none'
					})
					for (var i = 0; i < self.familyList.length; i++) {
						if (self.familyList[i].id == id) {
							self.familyList.splice(i, 1)
							break
						}
					}
				}
      })
    },
		// 下拉刷新
		downdata() {
			let self = this;
			self.isShowBottomView = false;
			setTimeout(() => {
				uni.$emit('downdataHD', {
					type: 'down'
				});
				self.page = 1;
				self.familyList = [];
				self.isReloadComplete = false;
				self.isNoData = true;
				self.getFamilyFacebook();
			}, 1000)
		},
		// 上拉加载
		updata() {
			let self = this;
			self.isShowBottomView = true;
			if(self.page < self.page_count) {
				self.page++;
			} else {
				self.isReloadComplete = true;
				self.isNoData = false;
				uni.$emit('updataHD', {
					type: 'up'
				});
				self.isShowBottomView = false;
				return 
			}
			self.getFamilyFacebook();
			self.isShowBottomView = false;
		},
		// 页面滚动
		onScroll(e) {
			if (e.scrollTop > this.systemHeight) {
				this.roll = true;
			} else {
				this.roll = false;
			}
		},
		/*scrollview返回远点*/
		scrollTo() {
			uni.$emit('goTop', '');
		},
		//获取系统参数
		getSystemMsg: function(key) {
			var result = '';
			uni.getSystemInfo({
				success: (res) => {
					if (key === 'windowHeight') {
						result = res.windowHeight;
					}
				}
			});
			return result;
		},
  }
}
</script>

<style lang="scss">
page {
  background: #f4f4f4;
}

#container {
	height: 90vh;
	position: relative;
	background: url('https://z3.ax1x.com/2021/09/02/hD6GsU.png') no-repeat;
	background-size: 100% 120rpx;
	padding-top: 50rpx;
  // .banner {
  //   width: 750rpx;
  //   height: 100rpx;
		
  // }

  .item {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 684rpx;
    height: 164rpx;
    background: #ffffff;
    box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(176, 176, 176, 0.4);
    border-radius: 20rpx;
    margin: 0 auto;
    margin-bottom: 20rpx;
    top: -82rpx;

    .img {
      width: 140rpx;
      height: 140rpx;
      border-radius: 50%;
    }

    .info {
      .info-top {
        display: flex;
        align-items: center;
        margin-bottom: 30rpx;

        .name {
          font-size: 18px;
          font-weight: 700;
          color: #000;
          margin-right: 22rpx;
        }

        .nickname {
          width: 89rpx;
          height: 37rpx;
          font-size: 12px;
          background: #ffeef0;
          color: #ff5b76;
          text-align: center;
        }
      }

      .info-bottom {
        font-size: 12px;
        color: #5a5a5a;

        .age {
          margin: 0 73rpx 0 60rpx;
        }
      }
    }

    .btn {
      color: #fff;
      font-size: 24rpx;
      line-height: 40rpx;
      text-align: center;

      .editor {
        width: 109rpx;
        height: 40rpx;
        background: linear-gradient(0deg, #69dde8, #6589fe, #4a75ff);
        border-radius: 5rpx;
        margin-bottom: 20rpx;
      }

      .del {
        width: 109rpx;
        height: 40rpx;
        background: linear-gradient(0deg, #ff4a4a, #fe7575, #fe3838);
        border-radius: 5rpx;
      }
    }
  }

  .add-family {
    width: 572rpx;
    height: 90rpx;
    line-height: 90rpx;
    font-size: 16px;
    background: linear-gradient(90deg, #69dee8, #52d2cf);
    border-radius: 45rpx;
    color: #fff;
    text-align: center;
    position: fixed;
    left: 50%;
		bottom: 10rpx;
    transform: translateX(-50%);
		z-index: 99;
  }
}
</style>
